<template>
  <div class="upload-file">
    <el-upload list-type="picture-card" :accept="accept" :headers="uploadInfo.headers" :action="uploadInfo.url" :limit="1"
      :on-success="handleFileSuccess" :before-upload="handleFileUploadBefore" v-model:file-list="uploadFileList"
      :on-change="handleEditChange" :on-remove="handleRemove">
      <el-icon v-show="uploadFileList.length == 0">
        <Plus />
      </el-icon>
    </el-upload>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth";
const props = defineProps({
  imgUrl: { tyle: String, default: '' }
})
const emits = defineEmits(['update:imgUrl'])
const uploadInfo = ref({
  url: import.meta.env.VITE_APP_BASE_API + "/api/UploadFileApi/uploadFile",
  headers: { token: getToken() }
})
const accept = ref(['.jpg', '.png', '.jpeg'])
const { proxy } = getCurrentInstance();
const uploadFileList = ref([])
/** 文件上传前的处理*/
const handleFileUploadBefore = (file) => {
  let size = file.size;
  if (size > 10 * 1024 * 1024) {
    proxy.$modal.msgWarning("上传的单个文件不能超过10M!");
    return false;
  }
  const index = file.name.lastIndexOf('.')
  const fileType = file.name.slice(index, file.name.length)
  if (!accept.value.includes(fileType)) {
    proxy.$modal.msgWarning(`上传的文件不是${accept.value.join('、')}！`);
    return false;
  }
};

//文件列表变化
function handleEditChange(file, fileList) {
  let size = file.size;
  if (size > 10 * 1024 * 1024) {
    proxy.$modal.msgWarning("上传的单个文件不能超过10M!");
    return false;
  }
  const index = file.name.lastIndexOf('.')
  const fileType = file.name.slice(index, file.name.length)
  if (!accept.value.includes(fileType)) {
    proxy.$modal.msgWarning(`上传的文件不是${accept.value.join('、')}！`);
    return false;
  }
  uploadFileList.value = fileList
}

/* 文件移除 */
function handleRemove(file, fileList) {
  uploadFileList.value = [];
}

/* 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  const { code, data } = response;
  if (code !== 0) {
    proxy.$modal.msgWarning(`文件《${file.name}》上传失败！`);
    file.status = "error";
    return false;
  } else {
    emits('update:imgUrl', data)
    props.imgUrl = data
    proxy.$modal.msgSuccess("文件上传成功！");
    uploadFileList.value = fileList
  }
};
function updateFileList(imgUrl) {
  nextTick(() => {
    console.log(11111,imgUrl);
    uploadFileList.value = [{ name: imgUrl, fileUrl: imgUrl }]
  })
}
watch(() => uploadFileList.value, () => {
  nextTick(() => {
    if (uploadFileList.value.length) { }
    const pictureCard = document.querySelector('.el-upload--picture-card')
    const isNone = uploadFileList.value.length > 0
    pictureCard.style.display = isNone ? 'none' : 'block'
  })
}, { immediate: true, deep: true })
defineExpose({ updateFileList })
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>